.login-page{
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  .logo-section{
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .logo {
      height: 6em;
      padding: 1.5em;
      will-change: filter;
      transition: filter 300ms;
    }
    .logo:hover {
      filter: drop-shadow(0 0 2em #646cffaa);
    }
    .logo.react:hover {
      filter: drop-shadow(0 0 2em #61dafbaa);
    }
    
    @keyframes logo-spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    
    @media (prefers-reduced-motion: no-preference) {
      a:nth-of-type(2) .logo {
        animation: logo-spin infinite 20s linear;
      }
    }
  }
  .login-section{
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .login-form {
      max-width: 350px;
    }
    .login-form-button {
      width: 100%;
    }
  }
}
